{% block doc %}
    <!DOCTYPE html>
    <html {% block html_attribs %}lang="zh-CN"{% endblock %}>
    {% block html %}
        <head>
            {% block head %}
                {% block metas %}
                    <meta charset="utf-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                {% endblock %}
                <title>{% block title %}Bookstore{% endblock %}</title>
                {% block styles %}
                    <link href="{{ static('css/bootstrap.min.css') }}" rel="stylesheet">
                    <link href="{{ static('css/base.css') }}" rel="stylesheet">
                {% endblock %}
            {% endblock %}
        </head>
        <body{% block body_attribs %}{% endblock %}>
        {% block body %}
            {% block navbar %}
                <nav style="margin:0;" class="navbar navbar-default navbar-fixed-top">
                    <div class="container">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                    data-target="#bs-example-navbar-collapse-1"
                                    aria-expanded="false">
                                <span class="sr-only">导航栏</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand" href="{{ url('index') }}">Bookstore</a>
                        </div>
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav">
                                <li>
                                    <a href="{{ url('index') }}">
                                        <span class="glyphicon glyphicon-home"></span> 首页</a>
                                </li>
                                {% if request.user.is_authenticated %}
                                    <li>
                                        <a>
                                            <span class="glyphicon glyphicon-map-marker"></span>
                                            <span id="location"></span>
                                        </a>
                                    </li>
                                {% endif %}
                            </ul>
                            <form class="navbar-form navbar-left">
                                <div class="form-group has-feedback">
                                    <input type="text" class="form-control" placeholder="搜索">
                                    <span class="glyphicon glyphicon-search form-control-feedback"></span>
                                </div>
                            </form>
                            <ul class="nav navbar-nav navbar-right">
                                {% if request.user.is_authenticated %}
                                    <li>
                                        <a href="{{ url('user:order') }}">
                                            <span class="glyphicon glyphicon-list-alt"></span> 订单</a>
                                    </li>
                                    <li>
                                        <a href="{{ url('cart:detail') }}">
                                            <span class="glyphicon glyphicon-shopping-cart"></span> 购物车
                                            <span class="badge">{{ request.user.cart.get_total_quantity() }}</span>
                                        </a>
                                    </li>
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle"
                                           data-toggle="dropdown" role="button"
                                           style="padding: 10px 15px;"
                                           aria-haspopup="true" aria-expanded="false">
                                            <img class="img-circle"
                                                 src="{{ request.user.avatar.url }}"
                                                 width="30" height="30">
                                        </a>
                                        <ul class=" dropdown-menu" style="min-width:100%;">
                                            <li>
                                                <a href="">
                                                    <span class="glyphicon glyphicon-user"></span> 我的主页</a>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <span class="glyphicon glyphicon-bell"></span> 消息
                                                    <span class="badge pull-right">54</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="{{ url('user:settings-get') }}">
                                                    <span class="glyphicon glyphicon-cog"></span> 设置</a>
                                            </li>
                                            <li role="separator" class="divider"></li>
                                            <li>
                                                <a href="{{ url('auth:logout') }}">
                                                    <span class="glyphicon glyphicon-log-out"></span> 退出</a>
                                            </li>
                                        </ul>
                                    </li>
                                {% else %}
                                    <li>
                                        <a href="{{ url('auth:login') }}">
                                            <span class="glyphicon glyphicon-log-in"></span> 登录</a>
                                    </li>
                                    <li style="display:block;padding:13px 0;" class="text-muted">
                                        |
                                    </li>
                                    <li>
                                        <a href="{{ url('auth:register') }}">
                                            <span class="icon-zhuce">&#xe675;</span> 注册</a>
                                    </li>
                                {% endif %}
                            </ul>
                        </div>
                    </div>
                </nav>
            {% endblock %}
            {% block content %}
                <div class="container" style="padding-top:50px">
                    <div class="row">
                        <div class="col-md-6 col-md-offset-3">
                            {% if messages %}
                                {% for message in messages %}
                                    <div class="alert alert-info text-center fade in" role="alert">
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                        {{ message | safe }}
                                    </div>
                                {% endfor %}
                            {% endif %}
                        </div>
                    </div>
                    {# 返回顶部 #}
                    <button class="back_top glyphicon glyphicon-chevron-up"></button>
                    {% block page_content %}
                    {% endblock %}
                </div>
            {% endblock %}
            {% block scripts %}
                <script src="{{ static('js/jquery.js') }}"></script>
                <script src="{{ static('js/jquery.cookie.js') }}"></script>
                <script src="{{ static('js/bootstrap.min.js') }}"></script>
                <script src="{{ static('js/base.js') }}"></script>
            {% endblock %}
        {% endblock %}
        </body>
    {% endblock %}
    </html>
{% endblock %}